<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">

    <!-- 筛选按钮 -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                    <label class="btn btn-lg bg-warning" [class.active]="filterOption === 'all'" (click)="onFilterChange('all')">
                        <input type="radio" name="options" autocomplete="off" [checked]="filterOption === 'all'"> 近期所有竞价
                    </label>
                    <label class="btn btn-lg bg-warning" [class.active]="filterOption === 'participated'" (click)="onFilterChange('participated')">
                        <input type="radio" name="options" autocomplete="off" [checked]="filterOption === 'participated'"> 我参与的
                    </label>
                    <label class="btn btn-lg bg-warning" [class.active]="filterOption === 'expired'" (click)="onFilterChange('expired')">
                        <input type="radio" name="options" autocomplete="off" [checked]="filterOption === 'expired'"> 已结束的
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- Main content -->
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">竞价清单</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body table-responsive p-0">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th style="width: 10px">#</th>
                                        <th>Cusip代码</th>
                                        <th>到期日</th>
                                        <th>头寸</th>
                                        <th>市场价(CN¥)</th>
                                        <th>底价(CN¥)</th>
                                        <th>竞价号</th>
                                        <th>我的顺位</th>
                                        <th>我的竞价(CN¥)</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let item of filteredBwicList; let i = index">
                                        <td>{{ i + 1 }}</td>
                                        <td>{{ item.cusip }}</td>
                                        <td>{{ item.dueDate }}</td>
                                        <td>{{ item.position }}</td>
                                        <td>{{ item.marketPrice }}</td>
                                        <td>{{ item.startingPrice }}</td>
                                        <td>{{ item.bidNumber }}</td>
                                        <td>{{ userBids[item.cusip]?.rank }}</td>
                                        <td>{{ userBids[item.cusip]?.bidAmount }}</td>
                                        <td>
                                            <!-- 如果用户身份为“买方客户” -->
                                            <ng-container *ngIf="identity === '买方客户'">
                                                <!-- 如果竞价号为初始值 "-" -->
                                                <ng-container *ngIf="item.bidNumber === '-'">
                                                    <span>
                                                        <a href="" data-toggle="modal" data-target="#modal-add" (click)="openAddBidModal(item)">参与竞价</a>
                                                    </span>&nbsp;&nbsp;
                                                    <span><a href="" data-toggle="modal" data-target="#modal-viewBid">当前竞价信息</a></span>
                                                </ng-container>
                                                <!-- 如果竞价号不为初始值 -->
                                                <ng-container *ngIf="item.bidNumber !== '-'">
                                                    <span><a href="" data-toggle="modal" data-target="#modal-update">重新出价</a></span>&nbsp;&nbsp;
                                                    <span><a href="" data-toggle="modal" data-target="#modal-cancel">取消出价</a></span>&nbsp;&nbsp;
                                                    <span><a href="" data-toggle="modal" data-target="#modal-viewBid">当前竞价信息</a></span>
                                                </ng-container>
                                            </ng-container>

                                            <!-- 如果用户身份不是“买方客户”，仅显示“当前竞价信息”按钮 -->
                                            <ng-container *ngIf="identity !== '买方客户'">
                                                <span><a href="" data-toggle="modal" data-target="#modal-viewBid">当前竞价信息</a></span>
                                            </ng-container>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->


<app-bwic-bid-add></app-bwic-bid-add>
<app-bwic-bid-view></app-bwic-bid-view>
<app-bwic-bid-update></app-bwic-bid-update>
<app-bwic-bid-cancel></app-bwic-bid-cancel>
